<template>
  <view class="flex flex-col px-10" :class="[AppTheme]">
    <view mt-5>
      <u-button type="primary" @click="changeTheme(ThemeEnum.THEME_B)">
        切换B主题
      </u-button>
    </view>
    <view mt-5>
      <u-button type="primary" @click="changeTheme(ThemeEnum.THEME_C)">
        切换C主题
      </u-button>
    </view>

    <view mt-5>
      <u-button type="primary" @click="changeTheme(ThemeEnum.THEME_DEFAULT)">
        重置
      </u-button>
    </view>

    <view class="text-white flex mt-5 flex-col">
      <u-button type="primary" :customStyle="primaryBtnTheme()" text="确定" />
    </view>

    <view class="text-white flex mt-5 flex-col">
      <text class="bg-primary">主要</text>
      <text class="bg-secondary">次要</text>
      <text class="bg-accent">强调</text>
      <text class="bg-neutral">中和</text>
      <text class="bg-base">基础</text>
      <text class="bg-info">信息</text>
      <text class="bg-success">成功</text>
      <text class="bg-warning">警告</text>
      <text class="bg-error">错误</text>
    </view>
    <view class="flex flex-col mt-10">
      <text class="text-primary">主要</text>
      <text class="text-secondary">次要</text>
      <text class="text-accent">强调</text>
      <text class="text-neutral">中和</text>
      <text class="text-base">基础</text>
      <text class="text-info">信息</text>
      <text class="text-success">成功</text>
      <text class="text-warning">警告</text>
      <text class="text-error">错误</text>
    </view>
    <view class="flex flex-col mt-10">
      <text class="border border-primary">主要</text>
      <text class="border border-secondary">次要</text>
      <text class="border border-accent">强调</text>
      <text class="border border-neutral">中和</text>
      <text class="border border-base">基础</text>
      <text class="border border-info">信息</text>
      <text class="border border-success">成功</text>
      <text class="border border-warning">警告</text>
      <text class="border border-error">错误</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ThemeEnum } from '@/enums/themeEnum'
import { useThemeConfig } from '@/hooks/setting/theme'
import { useAppStore } from '@/store/modules/app'
const { primaryBtnTheme } = useThemeConfig()

const { changeTheme } = useAppStore()
</script>

<style lang="less">
@import (reference) '@/uni_modules/tob-less/index.less';

.link {
  .underline;
  .text-primary;
  .cursor-pointer;
}

.btn {
  .w-20;
  .bg-primary;
  .text-white;
  .transition;
}

.btn:active {
  .bg-primary-focus;

  transform: scale(0.9);
}
</style>
